<template>
    <div class="login-wrap">
        <img class="bg" src="../assets/1.jpg"/>
        <el-form  class="login-container"  >
         <h1 class="title">用户登录</h1>
       
          <el-form-item  prop="username"
          :rules="[
            { required: true, message: '账户不能为空', trigger: 'blur' },
          ]">
            <el-input type="text" placeholder="用户账号" v-model="username" auto-complete="off"  clearable></el-input>
          </el-form-item>

          <el-form-item prop="password"
          :rules="[
            { required: true, message: '密码不能为空', trigger: 'blur' },
          ]">
            <el-input type="password" placeholder="密码" v-model="password" auto-complete="off" clearable></el-input>
          </el-form-item>
          <Home/>
          <el-form-item prop="yzm"
          :rules="[
            { required: true, message: '验证码不能为空', trigger: 'blur' },
          ]">
            <el-input type="yzm" placeholder="验证码" v-model="yzm" auto-complete="off" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doLogin" style="width: 100%;">登录</el-button>
          </el-form-item>
        </el-form>
    </div>
  </template>
   
<script>
import axios from "axios";
import Home from "./home.vue";
    export  default{
    name: "Login",
    data: function () {
        return {
            username: "",
            password: "",
            yzm:''
        };
    },
    methods: {
        doLogin: function () {
            let username = this.username;
            let password = this.password;
            let yzm = this.yzm;
            //定义请求路径
            let url = "http://localhost:3000/login";
            //定义请求参数
            let params = {
                username: username,
                password: password,
                ymz:yzm,
                methodName: "userLogin"
            };
            console.log(params);
            //发起ajax请求GET
            axios.get(url, { params: params }).then(resp => {
                let data = resp.data;
                console.log(data);
                if (data.code == 1) {
                    alert("登陆成功");
                }
                else {
                    alert("登陆失败");
                    console.log(params);
                }
            }).catch(err => {
                console.log();
            });
        }
    },
    components: { Home }
}
   
  </script>
   
  <style scoped>
      .login-wrap {
          box-sizing: border-box;
          width: 100%;
          height: 100%;
          padding-top: 10%;
          background-image:"../assets/1.jpg";
          /* background-color: #112346; */
          background-repeat: no-repeat;
          background-position: center right;
          background-size: 100%;
      }
   
      .login-container {
          border-radius: 10px;
          margin: 0px auto;
          width: 350px;
          padding: 30px 35px 15px 35px;
          background: #fff;
          border: 1px solid #eaeaea;
          text-align: left;
          box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
          float:right;
      }
   
      .title {
          margin: 0px auto 40px auto;
          text-align: center;
          color: #505458;
      }

      .bg{float:left ;
        border-radius: 20px;
        width: 1000px;
        height: 800px;
      }
  </style>